//用来代替window.onload的方法
function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}
//页面加载时运行的函数
addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);
//切换图片
function showPic(whichpic){
    //验证是否有placeholder这个id
    if(!document.getElementById('placeholder')){
        return false;
    }
    var source = whichpic.getAttribute('href')
    var placeholder = document.getElementById('placeholder');
    //验证placeholder是否为img标签
    if(placeholder.nodeName != 'IMG'){
        return false;
    }
    placeholder.setAttribute('src',source)
    //验证是否有description这个id
    if(document.getElementById('description')){
        //如果没有title属性，这text为空
        var text = whichpic.getAttribute('title') ? whichpic.getAttribute('title') : '';
        var description = document.getElementById('description');
        //判断description的第一个子节点是否为文本节点
        if(description.firstChild.nodeType === 3){
            description.firstChild.nodeValue = text
        }
    }
    return false;
}


//onclick事件
function prepareGallery(){
    //判断是否有document.getElementById属性
    if(!document.getElementById){
        return false
    }
    //判断是否有document.getElementsByTagName属性
    if(!document.getElementsByTagName){
        return false
    }
    //判断是否有id为imagegallery的元素
    if(!document.getElementById('imagegallery')){
        return false
    }
    var gallery = document.getElementById('imagegallery')
    var links = gallery.getElementsByTagName('a')
    console.log(links)
    for(var i = 0;i < links.length;i++){
        links[i].onclick = function(){
            showPic(this)
            //为了禁止a链接的跳转
            return !showPic(this) ? false : true
        }
    }
}
//为网页动态的加入标签
function preparePlaceholder(){
    if(!document.createElement){return false};
    if(!document.createTextNode){return false};
    if(!document.getElementById){return false};
    if(!document.getElementById('imagegallery')){return false};
    //创建img标签，并赋予属性
    var placeholder = document.createElement('img');
    placeholder.setAttribute('id','placeholder');
    placeholder.setAttribute('src','./imges/img.png');
    placeholder.setAttribute('alt','My image gallery');
    //创建p标签，并赋予属性
    var description = document.createElement('p');
    description.setAttribute('id','description');
    //创建文本标签
    var desctext = document.createTextNode('这是一张图片介绍')
    //将文本标签插入到p标签中
    description.appendChild(desctext);
    //方法1：将img元素与p元素放在图片列表的后面
    // document.body.appendChild(placeholder);
    // document.body.appendChild(description);
    //方法2：利用insertBefore()方法，将img元素与p元素放在图片列表的前面
    var gallery = document.getElementById('imagegallery');
    // gallery.parentNode.insertBefore(placeholder,gallery);
    // gallery.parentNode.insertBefore(description,gallery);
    //方法3：用自己写的insertAfter方法
    insertAfter(description,gallery);
    insertAfter(placeholder,gallery);
}

//由于DOM没有提供吧元素插入到目标元素之后的方法，所以编写一个函数用于此操作
function insertAfter(newElement,oldElement){
    var parent = oldElement.parentNode;
    if(parent.lastChild == oldElement){
        parent.appendChild(newElement)
    }else{
        parent.insertBefore(newElement,oldElement.nextSibling);
    }
}